import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { DateInput, Stack } from "metabase/ui";
import * as DateInputStories from "./DateInput.stories";

<Meta of={DateInputStories} />

# DateInput

Our themed wrapper around [Mantine DateInput](https://v6.mantine.dev/dates/date-input/).

## Docs

- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
- [Mantine DateInput Docs](https://v6.mantine.dev/dates/date-input/)

## Examples

<Canvas>
  <Story of={DateInputStories.Default} />
</Canvas>

### Size - md

<Canvas>
  <Story of={DateInputStories.EmptyMd} />
</Canvas>

#### Filled

<Canvas>
  <Story of={DateInputStories.FilledMd} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={DateInputStories.AsteriskMd} />
</Canvas>

#### Description

<Canvas>
  <Story of={DateInputStories.DescriptionMd} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={DateInputStories.DisabledMd} />
</Canvas>

#### Error

<Canvas>
  <Story of={DateInputStories.ErrorMd} />
</Canvas>

#### Icon

<Canvas>
  <Story of={DateInputStories.IconMd} />
</Canvas>

#### Read only

<Canvas>
  <Story of={DateInputStories.ReadOnlyMd} />
</Canvas>

#### No popover

<Canvas>
  <Story of={DateInputStories.NoPopoverMd} />
</Canvas>

### Size - xs

<Canvas>
  <Story of={DateInputStories.EmptyXs} />
</Canvas>

#### Filled

<Canvas>
  <Story of={DateInputStories.FilledXs} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={DateInputStories.AsteriskXs} />
</Canvas>

#### Description

<Canvas>
  <Story of={DateInputStories.DescriptionXs} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={DateInputStories.DisabledXs} />
</Canvas>

#### Error

<Canvas>
  <Story of={DateInputStories.ErrorXs} />
</Canvas>

#### Icon

<Canvas>
  <Story of={DateInputStories.IconXs} />
</Canvas>

#### Read only

<Canvas>
  <Story of={DateInputStories.ReadOnlyXs} />
</Canvas>

#### No popover

<Canvas>
  <Story of={DateInputStories.NoPopoverXs} />
</Canvas>
